<template>
  <a-layout id="components-layout-demo-side" style="min-height: 100vh">
    <sider-bar />
    <a-layout>
      <Header />
      <a-layout-content style="margin: 10px 16px">
        <div :style="{ padding: '24px', background: '#fff', minHeight: '360px' }">
          <router-view></router-view>
        </div>
      </a-layout-content>
      <a-layout-footer style="text-align: center">Ant Design ©2018 Created by Ant UED</a-layout-footer>
    </a-layout>
  </a-layout>
</template>

<script>
import { Layout } from "ant-design-vue";
import SiderBar from "../components/SiderBar.vue";
import Header from "../components/Header.vue";

export default {
  data() {
    return {
      collapsed: false
    };
  },

  components: {
    ALayout: Layout,
    ALayoutContent: Layout.Content,
    ALayoutFooter: Layout.Footer,
    SiderBar,
    Header
  }
};
</script>

<style>
#components-layout-demo-side .logo {
  height: 32px;
  background: rgba(255, 255, 255, 0.2);
  margin: 16px;
}
</style>